<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 670px;
			height: 280px;
			margin: 0 auto;
			overflow: hidden;
		}
		ul{
			display: flex;
			animation: cs 10s infinite linear alternate;
		} 
		li{
			list-style: none;
		}
		@keyframes cs{
			0%{
				transform: translateX(0);
			}
			5%{
				transform: translateX(-670px);
			}
			20%{
				transform: translateX(-670%);
			}
			30%{
				transform: translateX(-1340px);
			}
			50%{
				transform: translateX(-1340px);
			}
			60%{
				transform: translateX(-2010px);
			}
			80%{
				transform: translateX(-2010px);
			}
			85%{
				transform: translateX(-2680px);
			}
			100%{
				transform: translateX(-2680px);
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li><img src="a1.jpg"></li>
			<li><img src="a2.jpg"></li>
			<li><img src="a3.jpg"></li>
			<li><img src="a4.jpg"></li>
			<li><img src="a1.jpg"></li>
		</ul>
	</div>
</body>
</html>